<template>
    <!-- 过渡动画 -->
    <div class="img-view" @click.stop="bigImg">
        <div class="img">
            <!-- 图片 -->
            <img :src="imgSrc" />
        </div>
    </div>
</template>
<script>
export default {
    name: "BigImg",
    props: ["imgSrc"], //接受图片地址
    data() {
        return {};
    },
    mounted(){
        let dom = document.getElementsByTagName('body')[0]
        let that = this
        dom.addEventListener('click', that.bigImg)
    },
    methods: {
        bigImg() {
            // 发送事件
            this.$emit("clickit");
        },
    },
};
</script>
<style lang='scss' scoped>
.img-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    .img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        img{
            min-width: 350px;
            max-width: 800px;
            min-height: 200px;
            max-height: 500px;
        }
    }
}
</style>
